<template>
  <!-- 引入container布局 -->
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div>
        <img src="../assets/images/logo.png" alt class="logo_img" />
        <span>问卷系统</span>
      </div>
      <!-- 添加修改个人信息按钮 -->
      <!-- <el-button type="info" @click="logout">安全退出</el-button> -->
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ this.name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            @click.native="showEditDialog(name)"
            icon="el-icon-edit"
            >修改信息</el-dropdown-item
          >
          <el-dropdown-item @click.native="logout" icon="el-icon-switch-button"
            >退出</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 隐藏侧边栏按钮 -->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#409eff"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menuList"
            :key="item.id"
            @click="test(item.path)"
          >
            <template slot="title">
              <i :class="iconsObject[item.id]" :style="iconsColor[item.id]"></i>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="it.path"
              v-for="it in item.sList"
              :key="it.id"
              @click="saveNavState(it.path)"
            >
              <template slot="title">
                <i :class="iconsObject[it.id]" :style="iconsColor[it.id]"></i>
                <span>{{ it.title }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体内容 -->
      <el-main>
        <!-- 路由占位 -->
        <router-view></router-view>
        <!-- 修改对话框 -->
        <el-dialog
          title="修改用户"
          :visible.sync="editDialogVisible"
          width="50%"
        >
          <el-form
            :model="editForm"
            :rules="editFormRules"
            ref="editFormRef"
            label-width="70px"
          >
            <el-form-item label="用户名" prop="name">
              <el-input v-model="editForm.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="tel">
              <el-input v-model="editForm.tel" disabled></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passwd">
              <el-input v-model="editForm.passwd"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editUserInfo">确定</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  // 访问store数据
  computed: mapState([
    // 映射 this.count 为 store.state.count
    "level",
    "menuList1",
    "menuList2",
    "menuList3",
    "menuList4",
  ]),
  data() {
    return {
      //菜单列表
      menuList: [],
      isCollapse: false,
      iconsObject: {
        100: "iconfont icon-quanxian",
        200: "iconfont icon-wenjuan",
        300: "iconfont icon-qunzu",
        400: "iconfont icon-huida",
        500: "iconfont icon-shujufenxi",
        600: "iconfont icon-changyongtubiao_jifei",
        700: "iconfont icon-qunzu",
        800: "iconfont icon-wenjuan",
        101: "iconfont icon-yonghu",
        201: "iconfont icon-fabu",
        202: "iconfont icon-moban",
        203: "iconfont icon-huishouzhan",
        301: "iconfont icon-qunzu",
        401: "iconfont icon-Yhuida",
        402: "iconfont icon-Nhuida",
        501: "iconfont icon-shujudaping",
        601: "iconfont icon-changyongtubiao_jifei",
        701: "iconfont icon-qunzu",
        801: "iconfont icon-wenjuan",
      },
      iconsColor: {
        100: "color: gray;",
        200: "color: gray;",
        300: "color: gray;",
        400: "color: gray;",
        500: "color: gray;",
        600: "color: gray;",
        700: "color: gray;",
        800: "color: gray;",
        101: "color: gray;",
        201: "color: gray;",
        202: "color: gray;",
        203: "color: gray;",
        301: "color: gray;",
        401: "color: green;",
        402: "color: red;",
        501: "color: gray;",
        601: "color: gray;",
        701: "color: gray;",
        801: "color: gray;",
      },
      activePath: "/welcome", //默认路径为空
      name: "", //登录者name
      editDialogVisible: false, //修改用户信息对话框，初始false
      //修改用户信息
      editForm: {},
      //修改表单验证
      editFormRules: {
        passwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 1,
            max: 12,
            message: "长度在 1 到 12 个字符",
            trigger: "blur",
          },
        ],
        level: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
    };
  },

  //onload 事件
  created() {
    //查询menuList
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem("activePath"); //取出session里的path,动态修改activePath
    this.name = window.sessionStorage.getItem("name");
  },

  methods: {
    ...mapMutations(["clearinfor"]),

    test(path) {
      console.log(path);
    },

    async logout() {
      const confirmResult = await this.$confirm("确认要退出系统?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult != "confirm") {
        //取消
        return this.$message.info("已取消退出");
      }
      this.clearinfor();
      window.sessionStorage.clear(); //清除session
      this.$router.push("/login"); //回到首页
      this.$message.success("成功退出系统");
    },

    //获取导航菜单方法
    async getMenuList() {
      const level = window.sessionStorage.getItem("level");

      // console.log(window.sessionStorage)
      if (level == "1") {
        this.menuList = this.menuList1;
      } else if (level == "2") {
        this.menuList = this.menuList2;
      } else if (level == "3") {
        this.menuList = this.menuList3;
      } else {
        this.menuList = this.menuList4;
      }
      // console.log(this.menuList);
    },

    //获取用户，并显示对话框
    async showEditDialog(name) {
      const { data: res } = await this.$http.get("getUpdate?name=" + name);
      this.editForm = res.data; //查询出用户信息反填回编辑表单
      this.editDialogVisible = true;
    },

    //修改用户个人信息
    editUserInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        await this.$http({
          method: "post",
          url: "/editUser",
          data: this.editForm,
        }).then((res) => {
          if (res.data.code == "666") {
            this.$message.success(res.data.message);
            //隐藏
            this.editDialogVisible = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
      });
    },

    //控制伸缩
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },

    //保存路径
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath); //存放在session中
      this.activePath = activePath;
    },
  },
};
</script>

<style lang="less" scoped>
//布局器样式
.home-container {
  height: 100%;
}
//头样式
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between; //左右贴边
  padding-left: 0%; //左边界
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}
//侧边栏样式
.el-aside {
  background-color: #333744;
  //侧边栏不平整
  .el-menu {
    border-right: none;
  }
}
//主体样式
.el-main {
  background-color: #eaedf1;
}
//首页图片logo样式
.logo_img {
  width: 55px;
  height: 55px;
}
//按钮样式
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer; // 显示小手
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}
</style>